<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
       
         <!-- 卡片区域 -->
         <el-card>
             <el-row :gutter="20">
                 <el-col :span="8">
                     <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList()">
                       <el-button slot="append" icon="el-icon-search" @click="getGoodsList()"></el-button>
                    </el-input>
                 </el-col  >
                 <el-col :span="4" >
                     <el-button type="primary" @click="goAddPage" >添加商品</el-button>
                 </el-col>
             </el-row>
             <!-- 表格区域 -->
               <el-table :data="goodsList" border stripe>
                   <el-table-column type="index">
                   </el-table-column>
                    <el-table-column label="商品名称" prop="goods_name"> 
                   </el-table-column>
                    <el-table-column label="商品价格(元)" prop="goods_price" width="90px"> 
                   </el-table-column>
                    <el-table-column label="商品重量" prop="goods_weight" width="70px"> 
                   </el-table-column>
                    <el-table-column label="创建时间" prop="add_time" width="140px"> 
                        <template slot-scope="scope">
                           {{scope.row.add_time | dataFormat}}
                        </template>
                   </el-table-column>
                    <el-table-column label="操作" width="130px"> 
                         <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                            <el-button type="danger" @click="removeGoods(scope.row)" icon="el-icon-delete" size="mini"></el-button>
                         </template>
                   </el-table-column>
                   


               </el-table>
                 <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 5, 10, 20]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
         </el-card>
    </div>
</template>

<script>
export default {
       data() {
           return {
            //  请求参数对象
               queryInfo:{
                  query:'',
                  pagenum:1,
                  pagesize:10
               },
            //    商品记录总数
               total:0,
            //    商品列表数据
               goodsList:[],
           }
       },
       created() {
           this.getGoodsList();
       },
       methods: {
           async getGoodsList(){
               const {data:res} = await this.$http.get('goods',{params:this.queryInfo});
               if(res.meta.status !== 200) return this.$message.error('读取商品列表失败');
               console.log(res.data);
               this.goodsList = res.data.goods;
               this.total = res.data.total;
           },
          //pagesize发生变化时的回调
          handleSizeChange(newSize){
              this.queryInfo.pagesize = newSize;
              this.getGoodsList();
          },    
          //页码发生变化时的回调   
          handleCurrentChange(newPageNum){
              this.queryInfo.pagenum = newPageNum;
              this.getGoodsList();
          },
          //删除商品
          removeGoods(row){
               this.$confirm('此操作将永久删除该商品信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then( async() => {
                const {data:res} = await this.$http.delete(`goods/${row.goods_id}`);
                if(res.meta.status !== 200 ) return this.$message.error('删除失败');
                this.getGoodsList();
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
          },   
            //跳转到添加商品页面
            goAddPage(){
                this.$router.push('/goods/add');
            }   
       },

}
</script>

<style lang="less" scoped>
   
</style>